<template>
  <up-navbar :bgColor="styleParam.bgColor" @leftClick="back()" :customStyle="{height:'100px'}">
    <template #center>
      <view class="flex-center">
        <up-tabs :list="categoryList" :style="{opacity: styleParam.opacity}"></up-tabs>
      </view>
    </template>
    <template #right>
      <up-image src="/static/icon/common/share.png" width="30rpx"
                height="30rpx"></up-image>
    </template>
  </up-navbar>
  <scroll-view style="height: calc(100vh - 150rpx)" scroll-y="true" show-scrollbar="false" @scroll="onScroll"
               lower-threshold="100">
    <view class="page-container">
      <up-swiper
          :list="list4"
          keyName="url"
          height="600rpx"
          :autoplay="false"
          radius="0"
      ></up-swiper>

      <!-- 使用页面滚动而非scroll-view -->
      <view class="content">
        <view class="planet-title">
          <view class="flex-between ">
            <view style="font-weight: 600;">
              ￥<span style="font-size: 36rpx">18800.00</span>
            </view>
            <view class="u-f-sm">已售98件</view>
          </view>
          <view class="u-f-sl" style="margin-top: 20rpx">
            友达光电卓威同款面板27英寸 400hz 500hz 电竞显示器 0.2ms游戏显示屏27英寸400hz-E系TN面板升降
          </view>
        </view>
        <shop-comment></shop-comment>
        <shop-card></shop-card>
        <shop-recommend></shop-recommend>
        <view class="w-card">
          <view class="p-c-10" style="margin-bottom: 20rpx">宝贝详情</view>
          <image
              v-for="i in 4"
              :src="`https://picsum.photos/id/${i}/200/${i*100}`"
              mode="widthFix"
              style="width: 100%; height: auto"
          ></image>
          <image
              src="https://picsum.photos/600"
              mode="widthFix"
              style="width: 100%; height: auto"
          ></image>
          <image
              src="/static/img/user-bg.png"
              mode="widthFix"
              style="width: 100%; height: auto"
          ></image>
          <view style="margin-top: 20rpx" class="u-f-sm">
            <view class="p-c-10">价格说明</view>
            <view style="margin-top: 30rpx">被比较价格</view>
            <view class="f-c-9">
              商品的专柜价、吊牌价、厂家建议零售价、厂商指导价、品牌供应商提供的指导价、商家在后台设置的一口价、减价(折价)前的基准价或该商品曾经展示过的销售价等。该价格仅供您在购买时参考。
            </view>
            <view style="margin-top: 30rpx">标价/销售价</view>
            <view class="f-c-9">
              商品的实时标价。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。
            </view>
            <view class="f-c-9" style="margin-top: 30rpx">
              商家详情页所展示的可优惠金额是根据用户当前可使用的优惠券、满减、立减，可参与的特定活动(如多件多折、限时秒杀)、红包(含消费券)、淘金币抵扣等四舍五入计算得出，优惠获取及使用条件等详见活动页面及相关规则(如有)，实际价格以结算页面展示为准。
            </view>
            <view class="f-c-9" style="margin-top: 30rpx">
              此说明仅当出现价格比较时有效，具体请参见《淘宝平不格管理规则》，若商家单独对被比较价格进行说明的，顶部家的表述为准。
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
  <bottom-card></bottom-card>
</template>

<script setup>
import {ref, reactive} from 'vue';
import {back} from "@/util/router/router";
import bottomCard from "@/shop/components/bottom-card.vue";

const styleParam = ref({
  opacity: 0,
  bgColor: 'transparent',
  scrollTop: 500
})

const categoryList = ref([
  {
    name: "全部"
  },
  {
    name: "精华"
  },
  {
    name: "只看星主"
  },
])

const list4 = reactive([
  {
    url: 'https://picsum.photos/200/300',
    title: '身无彩凤双飞翼，心有灵犀一点通',
    type: 'image'
  },
  {
    url: 'https://picsum.photos/200/300',
    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
    type: 'image'
  }
]);

const onScroll = (e) => {
  // styleParam.value.scrollTop -= e.detail.scrollTop
  styleParam.value.bgColor = `rgba(255,255,255,${(e.detail.scrollTop - 150) / 400})`
  styleParam.value.opacity = (e.detail.scrollTop - 200) / 400
  if (e.detail.scrollTop > 259) {
    styleParam.value.bgColor = `rgba(255, 255, 255, 1)`
    styleParam.value.opacity = 1
  }
}

</script>

<style scoped>
@import "@/static/css/index.css";

.page-container {
  min-height: 100vh;
  position: relative;
  background: #f4f4f4;
}

/* 内容区域 - 初始状态 */
.content {
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
}


.planet-title {
  padding: 30rpx;
  background: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}
</style>